<template>
	<div class="sidebar">
		<el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#324157"
		 text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened router>
			<template v-for="item in items">
				<template v-if="item.subs">
					<el-submenu :index="item.index" :key="item.index">
						<template slot="title">
							<i :class="item.icon"></i>
							<span slot="title">{{ item.title }}</span>
						</template>
						<template v-for="subItem in item.subs">
							<el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
								<template slot="title">{{ subItem.title }}</template>
								<el-menu-item v-for="(threeItem,i) in subItem.subs" :key="i" :index="threeItem.index">{{ threeItem.title }}</el-menu-item>
							</el-submenu>
							<el-menu-item v-else :index="subItem.index" :key="subItem.index">{{ subItem.title }}</el-menu-item>
						</template>
					</el-submenu>
				</template>
				<template v-else>
					<el-menu-item :index="item.index" :key="item.index">
						<i :class="item.icon"></i>
						<span slot="title">{{ item.title }}</span>
					</el-menu-item>
				</template>
			</template>
		</el-menu>
	</div>
</template>

<script>
	import bus from '../common/bus';
	export default {
		data() {
			return {
				collapse: false,
				items: [{
						icon: 'el-icon-lx-home',
						index: 'dashboard',
						title: '系统首页'
					},

					{
						icon: 'el-icon-user-solid',
						index: '2',
						title: '代理管理',
						subs: [

							{
								icon: 'el-icon-lx-cascades',
								index: 'agent',
								title: '代理列表'
							}, {
								icon: 'el-icon-lx-cascades',
								index: 'transaction',
								title: '业绩明细'
							}, {
								icon: 'el-icon-lx-cascades',
								index: 'levelList',
								title: '等级分润明细'
							},
							{
								index: 'insertLevelApplicationform',
								title: '提交代理升级请求'
							},
							{
								index: 'myLevelApplicationform',
								title: '我的升级申请'
							},
							{
								index: 'otherLevelApplicationform',
								title: '待处理的代理申请'
							},
							{
								index: 'withdraw',
								title: '提现申请'
							}
						]
					},
					{
						icon: 'el-icon-lx-calendar',
						index: '4',
						title: '业务管理',
						subs: [
							{
								icon: 'el-icon-lx-cascades',
								index: 'addAdvice',
								title: '新增意见反馈',
							},
							{
								icon: 'el-icon-lx-cascades',
								index: 'addtransaction',
								title: '模拟添加订单',
							},
							{
								icon: 'el-icon-lx-cascades',
								index: 'newMembers',
								title: '新增下属会员',
							},
						]
					},
					{
						icon: 'el-icon-lx-calendar',
						index: '5',
						title: '系统管理',
						subs: [
							{
								icon: 'el-icon-lx-cascades',
								index: 'getMemberMes',
								title: '查看所有用户信息',
							},
							{
								icon: 'el-icon-lx-cascades',
								index: 'role',
								title: '角色管理'
							},
							{
								icon: 'el-icon-lx-cascades',
								index: 'loginmsg',
								title: '登录日志'
							}, {
								icon: 'el-icon-lx-cascades',
								index: 'user',
								title: '后台用户',
							},
						]
					},
					{
						icon: 'el-icon-lx-calendar',
						index: '6',
						title: '系统设置',
						subs: [
						{
							icon: 'el-icon-lx-cascades',
							index: 'banner',
							title: '轮播图',
						},
						{
							icon: 'el-icon-lx-cascades',

							index: 'bank',
							title: '银行设置',
						},
						{
							icon: 'el-icon-lx-cascades',
							index: 'advice',
							title: '意见反馈',
						},{
							icon:'el-icon-lx-cascades',
							index:'showBanner',
							title:'轮播图展示'
						}]
					},
					{
						icon: 'el-icon-lx-cascades',
						index: 'agentone',
						title: '统计分析',
						subs: [{
							index: 'selecttransactionpricebyMemberid',
							title: '查看所有用户当月销售的总金额'
						}]
					}
				]
			};
		},
		computed: {
			onRoutes() {
				return this.$route.path.replace('/', '');
			}
		},
		created() {
			// 通过 Event Bus 进行组件间通信，来折叠侧边栏
			bus.$on('collapse', msg => {
				this.collapse = msg;
				bus.$emit('collapse-content', msg);
			});
		}
	};
</script>

<style scoped>
	.sidebar {
		display: block;
		position: absolute;
		left: 0;
		top: 70px;
		bottom: 0;
		overflow-y: scroll;
	}

	.sidebar::-webkit-scrollbar {
		width: 0;
	}

	.sidebar-el-menu:not(.el-menu--collapse) {
		width: 250px;
	}

	.sidebar>ul {
		height: 100%;
	}
</style>